<template>
    <base-modal title="接待餐费用" :width="900" v-on="$listeners" :footer="null">
        <a-spin :spinning="loading.isSaving">
            <a-form-model
                ref="ruleForm"
                :model="formInfo"
                :rules="rules"
                :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
            >
                <a-row :gutter="24">
                    <a-col :md="24" :sm="24">
                        <a-form-model-item label="购买清单">
                            <span v-if="!formInfo.purchaseFileVOS || formInfo.purchaseFileVOS.length < 1">
                                <empty description="暂未上传照片"></empty>
                            </span>
                            <upload-list
                                v-else
                                :businessCode="'OF07'"
                                uploadType="image"
                                :editModel="0"
                                :uploadArrys.sync="formInfo.purchaseFileVOS"
                                multiple
                            ></upload-list>
                        </a-form-model-item>
                    </a-col>
                    <a-col :md="24" :sm="24">
                        <a-form-model-item label="检疫证明">
                            <span v-if="!formInfo.quarantineFileVOS || formInfo.quarantineFileVOS.length < 1">
                                <empty description="暂未上传照片"></empty>
                            </span>
                            <upload-list
                                v-else
                                :businessCode="'OF08'"
                                uploadType="image"
                                :editModel="0"
                                :uploadArrys.sync="formInfo.quarantineFileVOS"
                                multiple
                            ></upload-list>
                        </a-form-model-item>
                    </a-col>
                    <a-col :md="24" :sm="24">
                        <a-form-model-item label="农残检测">
                            <span v-if="!formInfo.residuesFileVOS || formInfo.residuesFileVOS.length < 1">
                                <empty description="暂未上传照片"></empty>
                            </span>
                            <upload-list
                                v-else
                                :businessCode="'OF09'"
                                uploadType="image"
                                :editModel="0"
                                :uploadArrys.sync="formInfo.residuesFileVOS"
                                multiple
                            ></upload-list>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-spin>
        <div class="ant-modal-footer relative page-btn-right-top">
            <slot name="footer">
                <a-button type="primary" @click="handleCancel">关闭</a-button>
            </slot>
        </div>
    </base-modal>
</template>

<script>
import { getCanteenProcurementById, addCasualMealsApplyParameter } from '@/api/office/canteen' // api
import BaseModal from '@/components/BaseModal'
import UploadList from '@/components/UploadList'
import { Empty } from 'ant-design-vue'
export default {
    components: {
        BaseModal,
        UploadList,
        Empty
    },
    props: {
        initData: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            loading: {
                isSaving: false,
            },
            formInfo: {},
            rules: {},
        }
    },
    created() {
        this.getDetail()
    },
    watch: {
        // 监听附件实现附件校验
        'formInfo.fileInfoVOS'() {
            this.$nextTick(() => {
                this.$refs.ruleForm?.validateField('fileInfoVOS')
            })
        },
    },
    methods: {
        validateForm() {
            let flag = false
            this.$refs.ruleForm.validate((valid) => {
                flag = valid
              if(!valid) {
                this.$message.warning("请填写完所有必填项信息")
              }
            })
            return flag
        },
        getDetail() {
            const { id } = this.initData
            if (!id) return
            this.loading.isSaving = true
            getCanteenProcurementById(id).then((res) => {
                this.loading.isSaving = false
                this.formInfo = {
                    ...this.formInfo,
                    ...res.data,
                }
            })
        },
        handleCancel() {
            this.$emit('cancel')
        },
    },
}
</script>

<style lang="less" scoped>
form .ant-mentions,
form textarea.ant-input {
    height: auto !important;
    width: 100%;
}
</style>
